<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实验4 04160620林泽佳</title>
		<style>
			#waiceng{
				box-shadow: 10px 10px 15px black;
                border: 5px solid white;
				width: 70%;
				height: 600px;
				background-color: white;
				position: absolute;
				top:200px;
				margin-left:15%;
			}
			#neiceng1{
				font-family: "microsoft yahei";
				color: cornflowerblue;
				text-align: center;
				height: 130px;
			}
			#neiceng2{
				font-family: "microsoft yahei";
				font-size: 20px;
				height: 450px;
				color: cornflowerblue;
			}
			input{
				height: 30px;
				width: 200px;
				font-family: "microsoft yahei";
				color: black;
				font-size:  small;
			}
			#button{
				width:130px ;
				height:35px ;
				color: white;
				background-color:  cornflowerblue;
				font-size: large;
			}
		</style>
		<script>
			function checkForm(){
				var a =document.getElementById("username1");
				var avalue =a.value;//获取输入的内容
			    if (avalue.length<=0) {//判断输入内容的长度
				alert("您输入的用户名有误");
			    	return false;
			    }
				
			    var  b =document.getElementById("password1");
				var bvalue =b.value;
					if(/^[a-zA-Z\d_]{8,}$/.test(bvalue)){//利用正则表达式判断大于大于8位的密码 如果满足规则返回TRUE 不满足返回False 
					
					}else{
						alert("您输入的密码不满足需要");
						return false;
					}
					
					 var e=document.getElementById("password2");
					var evalue=e.value;
					if (evalue!=bvalue) {
						alert("您再次输入的密码有误")
									return false;
					}
					
			  var c = document.getElementById("email1");
			  var cvalue = c.value;
			  if(/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(cvalue)){
				//满足正则表达式后不返回TRUE 什么操作都不执行 
			  } else {
				  alert("您输入的邮箱不符合要求");
				  return false ;
			  }
			  var d=document.getElementById("name1");
			  var dvalue= d.value;
			  if (dvalue.length<=0) {
			  	alert("您输入的姓名有误");
				return false;
			  }
			 
		return true;
			  }
		</script>
	</head>
	<body bgcolor="darkgray">
		<div id="waiceng">
			<div id="neiceng1">
				<br/>
				<h1>用户注册界面</h1>
				<hr style="width: 80%; color:blue;"/>
			</div>
			<div id="neiceng2">
		    <form action="https://www.baidu.com/" onsubmit=" return checkForm()">
			<table  align="center" height="90%" width=" 22%" >
				<tr>
					<td>用户名</td>
					<td>
						<input type="text" placeholder="请输入用户名" id="username1"/>
					</td>
				</tr>
				<tr>
					<td>密码</td>
					<td>
						<input type="password" placeholder="请输入密码"id="password1"/>
					</td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td>
						<input type="password" placeholder="请再次输入密码"id="password2" />
					</td>
				</tr>
				<tr>
					<td>email</td>
					<td>
						<input type="email" placeholder="请输入邮箱" id="email1"/>
					</td>
				</tr>
				<tr>
					<td>姓名</td>
					<td>
						<input type="text" placeholder="请输入姓名"id="name1" />
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input type="submit" value="提交注册" id="button" />
					</td>
				</tr>
				</form>
				</div>
			</table>
		</div>
		
	</body>
</html>
